<template>
  <el-row id="rules-center-container">
    <el-row v-if="!isViewShow" class="permission">
      没有权限!
    </el-row>
    <el-card v-else class="box-card">
      <div slot="header" class="clearfix">
        <span>策略中心</span>
        <el-button :disabled="!isViewEdit" @click="handlerAdd" style="float: right; padding: 6px 6px;margin-right: 10px" type="primary">新增</el-button>
      </div>

      <el-row class="rc-card-content">
        <!--条件栏-->
        <el-row>
          <span>状态:</span>
          <el-select v-model="operateStatus" placeholder="请选择">
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>

          <el-input
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="searchValue">
          </el-input>

          <el-button :disabled="!isViewEdit" @click="submitSearch">筛选</el-button>
        </el-row>

        <!--表格栏-->
        <el-row class="table-layout">
          <el-table
            :data="tableDatas"
            max-height="640"
            header-align="center"
            style="width: 100%">
            <el-table-column
              prop="name"
              label="策略名称"
              align="center">
            </el-table-column>
            <el-table-column
              prop="description"
              align="center"
              label="策略描述">
            </el-table-column>
            <el-table-column
              prop="createTime"
              align="center"
              label="创建时间">
            </el-table-column>
            <el-table-column
              :formatter="runStatusFormatter"
              prop="operateStatus"
              align="center"
              label="运行状态">
            </el-table-column>
            <el-table-column
              fixed="right"
              align="center"
              label="操作">
              <template slot-scope="scope">
                <el-button :disabled="!isViewEdit" @click="handlerLook(scope.row)" type="text" size="small">查看</el-button>
                <el-button :disabled="!isViewEdit" v-if="!scope.row.operateStatus" @click="handlerAction(scope.row)" type="text" size="small">启动</el-button>
                <el-button :disabled="!isViewEdit" v-else @click="handlerAction(scope.row)" type="text" size="small">停止</el-button>
                <!--<el-button :disabled="!isViewEdit" @click="handlerLog(scope.row)" type="text" size="small">日志</el-button>-->
                <el-button :disabled="!isViewEdit" @click="handlerDelete(scope.row)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>

          </el-table>
        </el-row>

        <!--分页栏-->
        <el-row class="pagination-layout">
          <el-pagination
            layout="prev, pager, next"
            :total="paginationCount"
            :current-page="currentPage"
            :page-size="pageSize"
            @current-change="onPageChange">
          </el-pagination>
        </el-row>
      </el-row>
    </el-card>

    <!--弹窗-新增策略-->
    <el-dialog :visible.sync="isShowAddDialog">
      <el-row slot="title">
        <span style="font-size: 18px">新增策略</span>
        <el-button @click="handleAddSubmit" style="margin-left: 600px; padding: 6px 10px" type="primary" :loading="false">提交</el-button>
      </el-row>
      <el-row class="add-dialog-content">
        <el-row><span>策略名称:</span></el-row>
        <el-row> <el-input v-model="addForm.name" placeholder="请输入名称"></el-input></el-row>
        <el-row><span>策略描述:</span></el-row>
        <el-row>
          <el-input type="textarea" :rows="3" v-model="addForm.description" placeholder="请输入内容"></el-input>
        </el-row>
      </el-row>
    </el-dialog>

    <!--弹窗-查看-->
    <el-dialog class="look-dialog" :visible.sync="isShowLookDialog">
      <el-row slot="title">
        <span style="font-size: 18px">查看</span>
        <el-button @click="submitChange" style="margin-left: 900px; padding: 6px 10px" type="primary" :loading="false">提交</el-button>
      </el-row>
      <el-row class="look-dialog-content">
        <el-row><span>配置触发器:</span></el-row>
        <el-row>
          <span>触发器:</span>
          <el-select @change="onTriggerChange" v-model="settingForm.ruleTriggerList[0].triggerType" placeholder="请选择触发器类型">
            <el-option
              v-for="item in triggerOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-input v-model="settingForm.ruleTriggerList[0].cron" placeholder="请输入cron表达式"></el-input>
        </el-row>

        <el-row><span>配置条件:</span></el-row>
        <el-row v-for="(item,index) in settingForm.ruleConditionsList" class="current-magin">
          <el-row>
            <span>执行条件{{index + 1}}</span>
            <el-select v-model="item.conditionsType" placeholder="请选择执行条件">
              <el-option
                v-for="item in conditionOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-button @click="deleteCondition(index)" type="text">删除</el-button>
          </el-row>
          <el-row v-if="item.conditionsType == 2" class="current-magin">
            <span>开始时间:</span>
            <el-date-picker
              v-model="item.startTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="开始时间">
            </el-date-picker>
            <span>结束时间:</span>
            <el-date-picker
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="item.endTime"
              placeholder="结束时间">
            </el-date-picker>
           <!-- <el-date-picker
              v-model="conditionRangeValue"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>-->
          </el-row>
          <el-row v-else class="current-magin">
            <el-select @change="onSelectDevice($event,index,1)" v-model="item.equipmentId" placeholder="请选择设备">
              <el-option
                v-for="option in deviceOptions"
                :label="option.label"
                :value="option.value">
              </el-option>
            </el-select>
            <el-select v-model="item.attributeInfoId" placeholder="请选择变量">
              <el-option
                v-for="option in item.propertyOptions"
                :label="option.label"
                :value="option.value">
              </el-option>
            </el-select>
            <el-select v-model="item.comparisonMethod1" placeholder="请选择比较模式">
              <el-option
                v-for="option in compareTypeOptions"
                :label="option.label"
                :value="option.value">
              </el-option>
            </el-select>
            <el-select v-model="item.inputType" placeholder="选择比较参数的方式">
              <el-option
                v-for="option in compareValueTypeOptions"
                :label="option.label"
                :value="option.value">
              </el-option>
            </el-select>
            <el-input class="current-magin" v-if="item.inputType === 1" v-model="item.comparisonValue" type="number"  placeholder="请输入值"></el-input>
            <el-select class="current-magin" v-else v-model="item.customizeId" placeholder="请选择比较参数">
              <el-option
                v-for="option in compareOptions"
                :label="option.label"
                :value="option.value">
              </el-option>
            </el-select>
          </el-row>
        </el-row>
        <el-row class="current-magin current-link-color">
          <el-button @click="addNewCondition" type="text">+添加执行条件</el-button>
        </el-row>

        <el-row><span>配置动作:</span></el-row>
        <el-row v-for="(item,index) in settingForm.ruleActionList" class="current-magin">
          <el-row>
            <span>执行动作{{index + 1}}</span>
            <el-select @change="onActionChange(value,item)"  v-model="item.actionType" placeholder="请选择执行条件">
              <el-option
                v-for="option in actionTypeOptions"
                :label="option.label"
                :value="option.value">
              </el-option>
            </el-select>
            <el-button @click="deleteAction(index)" type="text">删除</el-button>
          </el-row>
          <el-row v-if="item.actionType == 1" class="current-magin">
            <el-select @change="onSelectDevice($event,index,2)" v-model="item.equipmentId" placeholder="请选择设备">
              <el-option
                v-for="option in deviceOptions"
                :label="option.label"
                :value="option.value">
              </el-option>
            </el-select>
            <el-select v-model="item.attributeInfoId" placeholder="请选择变量">
              <el-option
                v-for="option in item.propertyOptions"
                :label="option.label"
                :value="option.value">
              </el-option>
            </el-select>
            <el-select v-model="item.inputType" placeholder="选择比较参数的方式">
              <el-option
                v-for="option in compareValueTypeOptions"
                :label="option.label"
                :value="option.value">
              </el-option>
            </el-select>
            <el-input class="current-magin" v-if="item.inputType === 1" type="number" v-model="item.inputValue" placeholder="请输入值"></el-input>
            <el-select class="current-magin" v-else v-model="item.customizeId" placeholder="请选择比较参数">
              <el-option
                v-for="option in compareOptions"
                :label="option.label"
                :value="option.value">
              </el-option>
            </el-select>
          </el-row>
          <el-row v-else></el-row>
        </el-row>
        <el-row class="current-magin current-link-color">
          <el-button @click="addNewAction" type="text">+添加执行动作</el-button>
        </el-row>


      </el-row>
    </el-dialog>

  </el-row>
</template>

<script>
    export default {
        name: "index",
        data(){
          return {
            /*权限*/
            isViewShow: false,
            isViewEdit: false,
            /*分页*/
            paginationCount: 0,
            currentPage:1,
            pageSize:10,
            /*条件*/
            operateStatus: -1,
            searchValue: '',
            /*新增策略*/
            addForm:{
              name: '',
              description: ''
            },
            /*策略配置*/
            settingForm:{
              // 触发器
              ruleTriggerList : [{
                cron: "",
                triggerType: 2
              }],
              // 执行条件
              ruleConditionsList: [{
                comparisonMethod1: '',
                comparisonValue: '',
                conditionsType:2,
                endTime: '',
                startTime: '',
                equipmentId: '',
                attributeInfoId: '',
                inputType: 1,
                propertyOptions: [],
                customizeId: ''
              }],
              // 执行动作
              ruleActionList: [{
                actionType: 1,
                equipmentId:'',
                attributeInfoId: '',
                inputValue: '',
                inputType: 1,
                propertyOptions: [],
                customizeId: ''
              }],
            },

            statusOptions:[{value: -1,label: '全部'},{value: 1,label: '运行'},{value: 0,label: '停止'}],
            isShowAddDialog: false,
            tableDatas: [],
            isShowLookDialog: false,
            /*触发器*/
            triggerOptions:[{label:"定时触发",value: 2},{label:"设备触发",value: 1}],
            /*执行条件*/
            conditionValue: 1,
            conditionOptions:[{label:"时间范围",value: 2},{label:"设备状态",value: 1}],
            conditionRangeValue:"",
            deviceValue:'',
            deviceOptions:[],
            propertyValue:'',
            propertyOptions:[],
            compareTypeValue:'',
            compareTypeOptions:[{label:"==",value: 1},{label:"!=",value: 2}
              ,{label:">",value: 3},{label:">=",value: 4}
              ,{label:"<",value: 5},{label:"<=",value: 6}
            ],
            compareValue:'',
            compareOptions:[],
            actionTypeValue:1,
            actionTypeOptions:[{label:"设备输出",value: 1},{label:"规则输出",value: 2},{label:"函数输出",value: 3}],
            /*执行动作*/
            deviceValue2: '',
            propertyValue2: '',
            actionInputValue: '',
            compareValueTypeOptions: [{label:"手动录入",value: 1},{label:"系统常量",value: 2}],
            /*item选择态*/
            selectItem: '',
            allTags: []
          }
        },
      created() {
        this.$emit('fixHeadIndex', "7")
      },
        mounted(){
          let obj = this.validateGlobal.getPermission(15)
          this.isViewShow = obj.isViewShow
          this.isViewEdit = obj.isViewEdit
          this.askLists()
          this.askAllTags()
        },
        computed:{
          formatStatus1: function () {
            return this.companyInfo.isCentralEnterprises==1 ? '是' : this.companyInfo.isCentralEnterprises == 0 ? '否' : ''
          },
          formatStatus2: function () {
            return this.companyInfo.isAuthentication==1 ? '是' : this.companyInfo.isAuthentication == 0 ? '否' : ''
          }
        },
        methods:{
          runStatusFormatter: function(row, column){
            if(row.operateStatus){
              return '运行中'
            } else {
              return '未启动'
            }
          },

          submitSearch: function(){
            this.askLists()
          },
          handlerAdd: function() {
           if (this.isShowAddDialog) {
             this.isShowAddDialog = false
           }else{
             this.isShowAddDialog = true
           }
          },
          handleAddSubmit: function() {
            let _that = this
            let url = _that.ports.ruleManage.addRule
            let gateway = sessionStorage.getItem("gateway")
            _that.addForm.sn = gateway
            this.http.postForm(url,_that.addForm, res => {
              if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
                _that.$message('新增/编辑成功!');
                _that.isShowAddDialog = false
                _that.askLists()
              }else{
                _that.$message('新增/编辑失败!');
              }
            })
          },
          handlerLook: function(row) {
            if (this.isShowLookDialog) {
              this.isShowLookDialog = false
            }else{
              this.isShowLookDialog = true
            }
            this.selectItem = row
            this.askRuleInfo()
            this.askDeviceList()
            this.askCustomTagList()
          },
          handlerAction: function(row) {
            this.selectItem = row
            this.selectItem.operateStatus = !row.operateStatus
            let _that = this
            let gateway = sessionStorage.getItem("gateway")
            let url = _that.ports.ruleManage.fix
            this.selectItem.sn = gateway
            this.http.postForm(url,_that.selectItem, res => {
              if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
                _that.askLists()
                _that.$message('成功!');
              }else{
                _that.$message('失败!');
              }
            })
          },
          handlerLog: function(row) {
            // TODO
          },
          handlerDelete: function(row) {
            let _that = this
            let url = _that.ports.ruleManage.delete
            let askData = {
              ruleId: row.ruleId
            }
            this.http.postForm(url,askData, res => {
              if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
                _that.$message('删除成功!');
                _that.askLists()
              }else{
                _that.$message('删除失败!');
              }
            })
          },

          onPageChange: function(currentPage){
            this.currentPage = currentPage;
            this.askLists()
          },
          onSelectDevice: function($event,index,type){
            // this.propertyOptions = []
            console.log("$event",$event + '-' + index + "-" + type)
            this.askDeviceTaglist($event,index,type)
          },
          onTriggerChange: function(value) {
            if (value === 2) {
              this.triggerValue = value
            }else{
              this.triggerValue = 2
              this.$message("该功能暂未开放!")
            }
          },
          addNewCondition: function() {
            // TODO
            this.settingForm.ruleConditionsList.push(
              {
                comparisonMethod1: '',
                comparisonValue: '',
                conditionsType:2,
                endTime: '',
                startTime: '',
                equipmentId: '',
                attributeInfoId: '',
                propertyOptions: [],
                inputType: '',
                customizeId: ''
              }
            )
          },
          deleteCondition: function(index){
            this.settingForm.ruleConditionsList.splice(index,1)
          },
          addNewAction: function() {
            this.settingForm.ruleActionList.push(
              {
                actionType: 1,
                equipmentId:'',
                attributeInfoId: '',
                inputValue: '',
                propertyOptions: [],
                inputType: '',
                customizeId: ''
              }
            )
          },
          deleteAction: function(index){
            this.settingForm.ruleActionList.splice(index,1)
          },
          onActionChange: function(value,item) {
            if (value === 1) {
              item.actionType = value
            }else{
              item.actionType = 1
              this.$message("该功能暂未开放!")
            }
          },

          askLists: function() {
            let _that = this
            let gateway = sessionStorage.getItem("gateway")
            let url = _that.ports.ruleManage.allList
            let askData = {
              sn: gateway,
              current: _that.currentPage,
              size: _that.pageSize,
              operateStatus: _that.operateStatus,
              searchValue: _that.searchValue,
            }
            this.http.get(url,askData, res => {
              if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
                 if (res.data.records) {
                   _that.tableDatas = res.data.records
                   _that.paginationCount = res.data.total
                 }
              }else{
                _that.$message('列表获取失败!');
              }
            })
          },
          askAllTags: function () {
            let _that = this
            let userId = sessionStorage.getItem("userId")
            let gateway = sessionStorage.getItem("gateway")
            console.log("gateway",gateway)
            let url = _that.ports.collectManage.collectBaseData.tagList
            let askData = {
              search: '',
              isCumulative: '',
              userId: userId,
              current: 1,
              size: 1000,
              sn:gateway,
            }
            this.http.get(url,askData, res => {
              console.log("myTagLists",res)
              if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
                if (!res.data.records) return
                let arry = []
                for (let i = 0;i<res.data.records.length;++i){
                  arry.push({id: res.data.records[i].id ,tagName:res.data.records[i].tagName})
                }
                _that.allTags = arry
              }else{
                _that.$message('列表获取失败!');
              }
            })
          },

          askRuleInfo: async function() {
            let _that = this
            let url = _that.ports.ruleManage.ruleInfo
            let promise =  this.http.getAwait(url,{
              ruleId: _that.selectItem.ruleId
            })
            await promise.then(res=>{
              if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
                _that.settingForm = res.data
                if(_that.validateGlobal.isEmpty(res.data.ruleTriggerList)){
                  _that.settingForm.ruleTriggerList = [{
                    cron: "",
                    triggerType: 2
                  }]
                }if(_that.validateGlobal.isEmpty(res.data.ruleConditionsList)){
                  _that.settingForm.ruleConditionsList = [{
                    comparisonMethod1: '',
                    comparisonValue: '',
                    conditionsType:2,
                    endTime: '',
                    startTime: '',
                    equipmentId: '',
                    tagId: '',
                    inputType: 1,
                    propertyOptions: []
                  }]
                }else{
                  for(let i = 0;i<_that.settingForm.ruleConditionsList.length;++i){
                    for(let j = 0;j<_that.allTags.length;++j){
                      if (_that.settingForm.ruleConditionsList[i].attributeInfoId == _that.allTags[j].id) {
                        _that.settingForm.ruleConditionsList[i].propertyOptions = [{label: _that.allTags[j].tagName,value: _that.allTags[j].id}]
                      }
                    }
                  }
                }
                if(_that.validateGlobal.isEmpty(res.data.ruleActionList)){
                  _that.settingForm.ruleActionList = [{
                    actionType: 1,
                    equipmentId:'',
                    tagId: '',
                    inputValue: '',
                    inputType: 1,
                    propertyOptions: []
                  }]
                }else{
                  for(let i = 0;i<_that.settingForm.ruleActionList.length;++i){
                    for(let j = 0;j<_that.allTags.length;++j){
                      if (_that.settingForm.ruleActionList[i].attributeInfoId == _that.allTags[j].id) {
                        _that.settingForm.ruleActionList[i].propertyOptions = [{label: _that.allTags[j].tagName,value: _that.allTags[j].id}]
                      }
                    }
                  }
                }
                console.log("TTTTTTTTTT",_that.settingForm)
              }else{
                _that.$message('详情获取失败!');
              }
            })
           /* this.http.get(url,{
              ruleId: _that.selectItem.ruleId
            }, res => {
              if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
                _that.settingForm = res.data
                if(_that.validateGlobal.isEmpty(res.data.ruleTriggerList)){
                  _that.settingForm.ruleTriggerList = [{
                    cron: "",
                    triggerType: 2
                  }]
                }if(_that.validateGlobal.isEmpty(res.data.ruleConditionsList)){
                  _that.settingForm.ruleConditionsList = [{
                    comparisonMethod1: '',
                    comparisonValue: '',
                    conditionsType:2,
                    endTime: '',
                    startTime: '',
                    equipmentId: '',
                    tagId: '',
                    inputType: 1
                  }]
                }if(_that.validateGlobal.isEmpty(res.data.ruleActionList)){
                  _that.settingForm.ruleActionList = [{
                    actionType: 1,
                    equipmentId:'',
                    tagId: '',
                    inputValue: '',
                    inputType: 1
                  }]
                }
              }else{
                _that.$message('详情获取失败!');
              }
            })*/
          },

          askDeviceList: function() {
            let _that = this
            let gateway = sessionStorage.getItem("gateway")
            let url = _that.ports.deviceManage.list
            let askData = {
              sn: gateway,
              operateStatus: '',
              searchValue: '',
              current: 1,
              size: 1000,
            }
            this.http.get(url,askData, res => {
              console.log("myDeviceList",res)
              if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
                if (res.data.records){
                  let arry = []
                  for(let i = 0;i<res.data.records.length;++i){
                    arry.push({label: res.data.records[i].deviceName,value: res.data.records[i].id})
                  }
                  _that.deviceOptions = arry
                }
              }else{
                _that.$message('列表获取失败!');
              }
            })
          },

          askDeviceTaglist: function(value,index,type) {
            let _that = this
            let gateway = sessionStorage.getItem("gateway")
            let userId = sessionStorage.getItem("userId")
            let url = _that.ports.collectManage.collectBaseData.tagList
            let askData = {
              sn: gateway,
              search: '',
              userId: userId,
              current: 1,
              size: 1000,
              isCumulative: '',
              equipmentId: value
            }
            this.http.get(url,askData, res => {
              if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
                if (!_that.validateGlobal.isEmpty(res.data.records)){
                  let arry = []
                  for(let i = 0;i<res.data.records.length;++i){
                    arry.push({label: res.data.records[i].tagName,value: res.data.records[i].id})
                  }
                  if (type == 1) {   // 条件
                    _that.settingForm.ruleConditionsList[index].propertyOptions = arry
                    _that.settingForm.ruleConditionsList[index].attributeInfoId = res.data.records[0].id
                    console.log("ruleConditionsList:",_that.settingForm.ruleConditionsList)
                    console.log("propertyOptions:", _that.settingForm.ruleConditionsList[index].propertyOptions)
                  }else{             // 行为
                    _that.settingForm.ruleActionList[index].propertyOptions = arry
                    _that.settingForm.ruleActionList[index].attributeInfoId = res.data.records[0].id
                    console.log("ruleActionList:",_that.settingForm.ruleActionList)
                    console.log("ruleActionList:", _that.settingForm.ruleActionList[index].propertyOptions)
                  }
                  // _that.propertyOptions = arry
                }else{
                  if (type == 1) {
                    _that.settingForm.ruleConditionsList[index].propertyOptions = []
                    _that.settingForm.ruleConditionsList[index].attributeInfoId = ''
                  }else{
                    _that.settingForm.ruleActionList[index].propertyOptions = []
                    _that.settingForm.ruleActionList[index].attributeInfoId = ''
                  }
                }
              }else{
                _that.$message('列表获取失败!');
              }
            })
          },

          askCustomTagList: function() {
            let _that = this
            let gateway = sessionStorage.getItem("gateway")
            let url = _that.ports.dataLook.myTags.customTags
            let askData = {
              sn: gateway,
            }
            this.http.get(url,askData, res => {
              console.log("customTags",res)
              if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
                if(res.data){
                  let arry = []
                  for(let i = 0;i<res.data.length;++i){
                    arry.push({label: res.data[i].inputName,value: res.data[i].customizeId})
                  }
                  _that.compareOptions = arry
                }
              }else{
                _that.$message('列表获取失败!');
              }
            })
          },

          submitChange: function() {
            let _that = this
            let gateway = sessionStorage.getItem("gateway")
            let userId = sessionStorage.getItem("userId")
            let url = _that.ports.ruleManage.save
            let askData = {
              ruleActionList: _that.settingForm.ruleActionList,
              ruleConditionsList: _that.settingForm.ruleConditionsList,
              ruleTriggerList: _that.settingForm.ruleTriggerList,
              ruleId: _that.selectItem.ruleId,
              sn: gateway,
              userId: userId
            }
            this.http.post(url,askData, res => {
              if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
                _that.isShowLookDialog = false
                _that.$message('修改成功!');
              }else{
                _that.$message('修改失败!');
              }
            })
          },
        },

    }
</script>

<style lang="less">

  #rules-center-container {
    .el-card{
      margin: 20px 20px 0 20px;
      height: 820px;
    }

    .rc-card-content{
      .el-input{
        width: 200px;
      }
    }

    .look-dialog{
      .el-dialog{
        width: 56%;
        height: 700px;
      }
    }

    .el-dialog {
      width: 42%;
      .add-dialog-content{
        >:nth-child(2).el-row,>:nth-child(4).el-row{
          margin-top: 10px;
        }
        >:nth-child(3).el-row{
          margin-top: 20px;
        }
      }

      .look-dialog-content{
        width: 1030px;
        height: 600px;
        border: 1px solid lightgrey;
        padding: 10px;
        overflow-y: auto;
        .el-input{
          width: 200px;
        }

        >:nth-child(2).el-row, >:nth-child(4).el-row{
          margin-top: 10px;
        }

        >:nth-child(3).el-row{
          margin-top: 20px;
        }
      }
    }

    .current-magin{
      margin-top: 10px;
    }

    .current-link-color{
      color: #409EFF;
    }

    .pagination-layout{
      text-align: center;
      margin-top: 10px;
    }

  }

</style>
